<template>
  <div class="lottery-scan">
    <div v-if="!isupdateAddressActive">
      <div class="scan-lottery_title">
        <h2><a href="javascript:;" @click="backLotteryList">我的奖品</a> </h2>
        <a href="javascript:;" class="more" @click="updatedAddressActive">修改收货地址</a>
      </div>
      <main class="scan-lottery_main" >
        <div v-if="data.lotteryRaffleList.length>0">
          <ul class="scan-lottery_list" v-for="item in data.lotteryRaffleList">
            <li class="scan-lottery_goods">
              <img :src="item.rafflePhoto" > 
            </li>
            <li class="scan-lottery_info">
              <p class="small-info">{{ item.time }} </p>
              <p class="goods-name">{{ item.raffleName }}</p>
            </li>
          </ul>
        </div>
        <div v-else >
          <p class="nolottery-tips">你还没有抽中奖品，请再接再厉 </p>
        </div>
      </main>      
    </div>
    <div v-else class="update-addr">
      <div class="update-addr-wapper">
        <lottery-address addr-tips="请填写您的详细地址" @submit="afterLotteryAddressUpdated" ></lottery-address>
      </div>
    </div>
  </div>
</template>
<script >
  import LotteryAddress from 'pages/app/forms/lottery-address';

  export default {
    components: { LotteryAddress },
    props: {
      data: {
        type: Object,
        default: () =>({})
      }
    },
    data() {
      return {
        isupdateAddressActive: false
      };
    },
    methods: {
      backLotteryList() {
        this.isupdateAddressActive = false;
      },
      updatedAddressActive() {
        this.isupdateAddressActive = true;
      },
      afterLotteryAddressUpdated() {
        this.isupdateAddressActive = false;
        this.$emit('lottery-address-updated');
      }
    }
  }

</script>
<style lang="scss" scoped>
  $title-font-color: #d16dac;
  ul,li, h2 {
    margin:0;
    padding:0;    
  }
  ul,li {
    list-style: none;
  }
  .nolottery-tips {
    padding:1rem 0;
    text-align:center;
    color:#8f8f8f;
    font-size:.42rem;
  }
  .lottery-scan {
    margin-top: .65rem;
    background:#fff;
  }
  .scan-lottery_title {
    position:relative;
    padding:0 .22rem;
    height: 1.4rem;
    line-height: 1.4rem;
    background-color: #f4f4f4;
    h2,
    h2 a {
      color: $title-font-color;
      font-size:.54rem;
      font-weight: 700;
      text-decoration: none;
    }
    .more {
      position: absolute;
      right:.22rem;
      top:0;
      color: #5e8ce1;
      font-size: .36rem;
    }
  }
  .scan-lottery_main {
    padding-top:.1rem;
    min-height: 40vh;
    max-height: 65vh;
  }
  .scan-lottery_list {
    margin:0 .1rem .1rem;
    display:-webkit-flex;
    display:flex;
    justify-content:center;
  }
  .scan-lottery_goods {
    flex:0 1 43.44%;
    img {
      max-width: 100%;
      border:none;
    }
  }
  .scan-lottery_info {
    flex: 0 1 52.98%;
    align-self:center;
    padding-left:.15rem;
  }
  .small-info {
    color:#8f8f8f;
    font-size:.38rem;
  }
  .goods-name {
    color: $title-font-color;
    font-size:.42rem;
    font-weight: bold;
    line-height: initial;
  }
  .after-success_tips {
    line-height: 1.85em;
    text-align: center;
  }
  .addr-tips {
    color: #da0000;
  }
  .update-addr-wapper {
    padding: .65rem .5rem;
    background-color: rgb(130, 50, 168);
  }
</style>
